<template>
  <draggable class="editable-textarea" :list="list" >
    <div
      class="editable-content"
      v-for="(user, index) in list"
      :key="index"
      :ref="'drag'+index"
      @touchstart="onTouchStart($event,index)"
      @touchmove="onTouchMove($event,index)"
      @touchend="onTouchEnd($event,index)"
	  :options="{handle: '.handle', animation: 200}"
    >
      <template v-if="isEditable(user)">
        <input type="text" v-model="user.content" />
      </template>
      <template v-else>
        <div>{{ user.content }}</div>
      </template>
    </div>
  </draggable>
</template>

<script>
import draggable from 'vuedraggable';

export default {
  components: {
    draggable,
  },
  data() {
    return {
      list: [
        { content: 'Item 1' },
        { content: 'Item 2' },
        { content: 'Item 3' },
      ],
      dragOptions: {
		 handle: ".handle",
		 animation: 200,
	   },
    };
  },
  methods: {
    onTouchStart(event, index) {
      // 处理触摸开始事件
    },
    onTouchMove(event, index) {
      // 处理触摸移动事件
    },
    onTouchEnd(event, index) {
      // 处理触摸结束事件
    },
    isEditable(user) {
      // 判断是否可编辑
    },
  },
};
</script>